<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>用户列表</title>
    <script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        $(function (){

            //获取当前页码的input标签的对象，四个按钮在提交之前需要更新当前的页面
            var currentPageNumber = $("#currentPageNumber");
            //获取当前所有数据的总页数
            var pageCount = parseInt($("#pageCount").val());
            //获取表单的对象，用于提交分页的操作
            var pagingForm = $("#pagingForm")


            //绑定 首页 按钮的点击事件
            $("#firstPage").click(function (){

                //首页就把当前的页码改为 1 即可
                currentPageNumber.val(1);
                //提交表单
                pagingForm.submit();
            });

            //绑定 上一页 按钮的点击事件
            $("#prevPage").click(function (){
                //获取原页码并转成int类型
                let pageNumber = parseInt(currentPageNumber.val());

                //如果原页面已经是第一页了，无法再执行上一页操作
                //无需执行后台代码，直接给提示就可以
                if(pageNumber==1){
                    alert("当前已经是第一页了")
                }else{
                    //如果不是第一页，可以把原页码数减一当做当前页码数
                    currentPageNumber.val(pageNumber-1);
                    pagingForm.submit();
                }
            });

            //绑定 下一页 按钮的点击事件
            $("#nextPage").click(function (){

                //获取原页码并转成int类型
                let pageNumber = parseInt(currentPageNumber.val());

                //如果原页面已经等于总页数了，即最后一页，无法再执行下一页操作
                //无需执行后台代码，直接给提示就可以
                if(pageNumber==pageCount){
                    alert("当前已经是最后一页了")
                }else{
                    //如果不是最后一页，可以把原页码数加一当做当前页码数
                    currentPageNumber.val(pageNumber+1);
                    pagingForm.submit();
                }
            });

            //绑定 尾页 按钮的点击事件
            $("#lastPage").click(function (){
                //把当前页码直接赋总页数,也就是最后一页的页码数
                currentPageNumber.val(pageCount);
                pagingForm.submit();
            });

        })

    </script>
</head>
<body>

    <table border="1" align="center">
        <caption>用户列表</caption><br/>
        <tr>
            <th>用户名</th>
            <th>角色</th>
            <th>专业</th>
            <th>联系方式</th>
        </tr>
        <c:forEach items="${currentPageUsersList}" var="user">
            <tr>
                <td>${user.username}</td>
                <td>${user.role}</td>
                <td>${user.major}</td>
                <td>${user.phoneNum}</td>
            </tr>
        </c:forEach>

    </table>

    <form action="<%=request.getContextPath()%>/queryUsers" method="post" id="pagingForm">

        <div align="center">
            <input type="hidden" name="currentPageNumber" id="currentPageNumber" value="${sessionScope.currentPageNumber}">
            <input type="hidden" name="pageCount" id="pageCount" value="${sessionScope.pageCount}">
            <input type="button" value="首页" id="firstPage">
            <input type="button" value="上一页" id="prevPage">
            <input type="button" value="下一页" id="nextPage">
            <input type="button" value="尾页" id="lastPage">
            ${sessionScope.currentPageNumber} / ${sessionScope.pageCount}
            每页显示 <input type="text" name="dataCountPerPage" value="${sessionScope.dataCountPerPage}"> 条
        </div>

    </form>

</body>
</html>
